<style lang="less">

  .modal-message-toast {
    .modal-message-overlay {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      background-color: rgba(43, 43, 43, 0.50);
    }

    .modal-message-content {
      display: block;
      position: absolute;
      width: 540px;
      height: 202px;
      background: #FFFFFF;
      z-index: 1002;
      overflow: hidden;
      margin: 0 auto;
      border-radius: 14px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);

      .modal-message-title {
        height: 124px;
        line-height: 124px;
        text-align: center;
        font-size: 36px;
        color: rgba(49, 49, 49, 1);
      }

      .modal-message-fotter {
        height: 78px;
        line-height: 78px;
        text-align: center;
        font-size: 32px;
        color: rgba(73, 92, 201, 1);
      }
      .modal-meesage-border {
        height: 2px;
        background: rgba(234, 234, 234, 1);
      }
    }
  }

</style>

<template>
  <div class="modal-message-toast">
    <div class="modal-message-overlay" />
    <div class="modal-message-content">
      <div class="modal-message-title">
        <slot name="modalMessageTitle" />
      </div>
      <div class="modal-meesage-border" />
      <div class="modal-message-fotter">
        <slot name="modalMessageFotter" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ModalMessage',
  data() {
    return {};
  },
  created() {
  },
  mounted() {
  },
  methods: {},

};
</script>
